<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width" />
    <meta name="author" content="www.lzqcode.com" />
    <meta name="robots" content="all" />
    <title>我的博客</title>
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="layui/css/layui.css" />
    <link rel="stylesheet" href="css/master.css" />
    <link rel="stylesheet" href="css/gloable.css" />
    <link rel="stylesheet" href="css/nprogress.css" />
    <link rel="stylesheet" href="css/blog.css" />
    <link rel="shortcut icon" href="image/icons.ico" />

</head>
<body>
    <div class="header">
    </div>
    <header class="gird-header">
        <div class="header-fixed">
            <div class="header-inner">
                <a href="javascript:void(0)" class="header-logo" id="logo">Mr.Jin</a>
                <nav class="nav" id="nav">
                    <ul>
                        <li><a href="index.html">首页</a></li>
                        <li><a href="article.html">博客</a></li>
                        <li><a href="message.html">留言</a></li>
						<li><a href="diary.html">日记</a></li>
                        <li><a href="link.html">友链</a></li>
                    </ul>
                </nav>
                <a href="/User/QQLogin" class="blog-user">
                    <i class="fa fa-qq"></i>
                </a>
                <a class="phone-menu">
                    <i></i>
                    <i></i>
                    <i></i>
                </a>
            </div>
        </div>
    </header>
    <div class="doc-container" id="doc-container">
        <div class="container-fixed">
		    <div class="col-content">
		        <div class="inner">
		            <article class="article-list bloglist" id="LAY_bloglist" >
<!--						<section class="article-item zoomIn article">       -->
<!--&lt;!&ndash;							<div class="fc-flag">置顶</div>   &ndash;&gt;-->
<!--							<h5 class="title">       -->
<!--								<span class="fc-blue">【原创】</span>       -->
<!--								<a href="read.html">Java学习路线推荐</a>   -->
<!--							</h5>   -->
<!--							<div class="time">       -->
<!--								<span class="day">1</span>       -->
<!--								<span class="month fs-18">7<span class="fs-14">月</span></span>       -->
<!--								<span class="year fs-18 ml10">2020</span>   -->
<!--							</div>   -->
<!--							<div class="content">       -->
<!--								<a href="read.html" class="cover img-light">           -->
<!--									<img src="image/java.jpg">       -->
<!--								</a>-->
<!--								这篇文章是为了介绍自己自学用过的Java视频资料。本套整合教程总共180+G，共450+小时。考虑到绝大部分视频至少要看两遍，而且视频总时长并不代表学习时长，所以零基础初学者总学习时间大约为：600小时视频时长 + 100小时理解 + 100小时练习，至少需要800小时。你可能觉得自己能一天学习8小时，实际上平均下来每天能学4小时都算厉害了。总会有各种原因，比如当天内容太难，公司聚会，要出差等等。如果周末你也是坚持学习，那么最理想状况下，6个半月就可以学完，达到工作后能被人带的水平。但我知道那其实基本不可能。-->
<!--							</div>   -->
<!--							<div class="read-more">       -->
<!--								<a href="read.html" class="fc-black f-fwb">继续阅读</a>   -->
<!--							</div>    -->
<!--							<aside class="f-oh footer">       -->
<!--								<div class="f-fl tags">           -->
<!--									<span class="fa fa-tags fs-16"></span>           -->
<!--									<a class="tag">java路线</a>       -->
<!--								</div>       -->
<!--								<div class="f-fr">           -->
<!--									<span class="read">               -->
<!--										<i class="fa fa-eye fs-16"></i>               -->
<!--										<i class="num">213</i>           -->
<!--									</span>           -->
<!--									<span class="ml20">               -->
<!--										<i class="fa fa-comments fs-16"></i>               -->
<!--										<a href="javascript:void(0)" class="num fc-grey">1</a>           -->
<!--									</span>       -->
<!--								</div>   -->
<!--							</aside>-->
<!--						</section>-->
		            </article>
                    <div id="laypage"></div>
                </div>
		    </div>
		    <div class="col-other">
		        <div class="inner">
					<div class="other-item" id="categoryandsearch">
			    		<div class="search">
					        <label class="search-wrap">
					            <input type="text" id="searchtxt" placeholder="输入关键字搜索" />
					            <span class="search-icon" onclick="reloadArticleByKeyWord($('#searchtxt').val())">
					                <i class="fa fa-search"></i>
					            </span>
					        </label>
			        		<ul class="search-result"></ul>
			    		</div>
			    		<ul class="category mt20" id="category">
<!--				        	<li data-index="0" class="slider"></li>-->
<!--				        	<li data-index="1"><a href="/Blog/Article">全部文章</a></li>-->
<!--				            <li data-index="2"><a href="/Blog/Article/1/">Java</a></li>-->
<!--				            <li data-index="3"><a href="/Blog/Article/2/">前端</a></li>-->
<!--				            <li data-index="4"><a href="/Blog/Article/3/">Python</a></li>-->
<!--				            <li data-index="5"><a href="/Blog/Article/4/">PHP</a></li>-->
<!--				            <li data-index="6"><a href="/Blog/Article/5/">其它</a></li>-->
			    		</ul>
					</div>
					<!--右边悬浮 平板或手机设备显示-->
					<div class="category-toggle"><i class="layui-icon">&#xe603;</i></div>
					<div class="article-category">
					    <div class="article-category-title">分类导航</div>
<!--								<a href="/Blog/Article/1/">Java</a>-->
<!--								<a href="/Blog/Article/2/">前端</a>-->
<!--								<a href="/Blog/Article/3/">Python</a>-->
<!--								<a href="/Blog/Article/4/">PHP</a>-->
<!--								<a href="/Blog/Article/5/">其它</a>-->
					    <div class="f-cb"></div>
					</div>
					<!--遮罩-->
					<div class="blog-mask animated layui-hide"></div>
					<div class="other-item">
					    <h5 class="other-item-title">热门文章</h5>
					    <div class="inner">
					        <ul class="hot-list-article">
<!--					                <li> <a href="/Blog/Read/9">SpringBoot 入门爬虫项目实战</a></li>-->
<!--					                <li> <a href="/Blog/Read/12">SpringBoot 2.x 教你快速入门</a></li>-->
<!--					                <li> <a href="/Blog/Read/13">java学习路线</a></li>-->
<!--					                <li> <a href="/Blog/Read/4">基于SpringBoot+JWT+Redis跨域单点登录的实现</a></li>-->
<!--					                <li> <a href="/Blog/Read/7">SpringBoot 中如何使用SwaggerAPI接口文档？</a></li>-->
<!--					                <li> <a href="/Blog/Read/11">小白轻松入门Redis</a></li>-->
<!--					                <li> <a href="/Blog/Read/14">微信一键登录功能的实现</a></li>-->
<!--					                <li> <a href="/Blog/Read/8">NPOI导入导出Excel</a></li>-->
					        </ul>
					    </div>
					</div>
<!--					<div class="other-item">-->
<!--					    <h5 class="other-item-title">置顶推荐</h5>-->
<!--					    <div class="inner">-->
<!--					        <ul class="hot-list-article">-->
<!--					                <li> <a href="/Blog/Read/16">java学习路线</a></li>-->
<!--					                <li> <a href="/Blog/Read/14">基于SpringBoot+JWT+Redis跨域单点登录的实现</a></li>-->
<!--					                <li> <a href="/Blog/Read/9">小白轻松入门Redis</a></li>-->
<!--					        </ul>-->
<!--					    </div>-->
<!--					</div>-->
					<div class="other-item">
					    <h5 class="other-item-title">最近访客</h5>
					    <div class="inner">
					        <dl class="vistor">
					                <dd><a href="javasript:;"><img src="image/a1.png"><cite>Anonymous</cite></a></dd>
					                <dd><a href="javasript:;"><img src="image/a4.png"><cite>Dekstra</cite></a></dd>
					                <dd><a href="javasript:;"><img src="image/a2.png"><cite>惜i</cite></a></dd>
					                <dd><a href="javasript:;"><img src="image/a3.png"><cite>↙Aㄨ计划 ◆莪↘</cite></a></dd>
					                <dd><a href="javasript:;"><img src="image/a4.png"><cite>.</cite></a></dd>
					                <dd><a href="javasript:;"><img src="image/a1.png"><cite>Lambert.</cite></a></dd>
					                <dd><a href="javasript:;"><img src="image/a2.png"><cite>64ღ</cite></a></dd>
					                <dd><a href="javasript:;"><img src="image/a3.png"><cite>doBoor</cite></a></dd>
					                <dd><a href="javasript:;"><img src="image/a4.png"><cite>毛毛小妖</cite></a></dd>
					                <dd><a href="javasript:;"><img src="image/a1.png"><cite>NULL</cite></a></dd>
					                <dd><a href="javasript:;"><img src="image/a2.png"><cite>吓一跳</cite></a></dd>
					                <dd><a href="javasript:;"><img src="image/a3.png"><cite>如初</cite></a></dd>
					        </dl>
					    </div>
					</div>
		        </div>
		    </div>
		</div>
    </div>
    <footer class="grid-footer">
        <div class="footer-fixed">
            <div class="copyright">
                <div class="info">
                    <div class="contact">
                        <a href="javascript:void(0)" class="github" ><i class="fa fa-github"></i></a>
                        <a href="https://wpa.qq.com/msgrd?v=3&uin=845184365&site=qq&menu=yes" class="qq" target="_blank" title="930054439"><i class="fa fa-qq"></i></a>
                        <a href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=jinbinvip@163.com" class="email" target="_blank" title="jinbinvip@163.com"><i class="fa fa-envelope"></i></a>
                        <a href="javascript:void(0)" class="weixin"><i class="fa fa-weixin"></i></a>
                    </div>
                    <p class="mt05">
                        Copyright &copy; 2021-2022 二水个人博客 All Rights Reserved V.1.0.0 苏ICP备2021026193号-1
                    </p>
                </div>
            </div>
        </div>
    </footer>
    <script src="layui/layui.js"></script>
    <script src="js/yss/gloable.js"></script>
    <script src="js/plugins/nprogress.js"></script>
    <script>NProgress.start();</script>
 	<script src="js/yss/article.js"></script>
	<script src="../js/jquery-1.7.2.min.js"></script>
	<script src="../js/ershui/common.js"></script>
	<script  >
        window.onload = function () {
            NProgress.done();
            layui.use('laypage', function() {
                loadLayPage({});
            });
			//博客类型加载
			$.ajax({
				type:"get",
				url:"/Blog/categoryList",
				dataType: 'json',
				success:function (result) {
					if(result.code==web_status.SUCCESS){
						var responseEl = $("#category");
						var responseEl2=$('.article-category');
						responseEl.html("<li data-index='0'><a href='javascript:void(0);' onclick='reloadArticle()'>全部文章</a></li>\n");
						for(let index=1;index<=result.data.length;index++){
							var data=result.data[index-1];
							responseEl.append("<li data-index='"+index+"'><a href='javascript:void(0);' onclick='reloadArticle("+data.id+")'"+data.id+">"+data.categoryName+"</a></li>");
							responseEl2.append("<a href='javascript:void(0);' onclick='reloadArticle("+data.id+")'"+data.id+">"+data.categoryName+"</a>")
						}
						responseEl2.append('<div class="f-cb"></div>');
					}else{
						responseEl.html();
					}
				}
			});
			//热门文章加载
			$.ajax({
				type:"get",
				url:"/Blog/getHotArticle",
				dataType: 'json',
				success:function (result) {
					if(result.code==web_status.SUCCESS){
						var responseEl = $(".hot-list-article");
						for(let index=1;index<=result.data.length;index++){
							var data=result.data[index-1];
							responseEl.append('<li> <a href="read.html?id='+data.id+'">'+data.articleName+'</a></li>')
						}
					}else{
						responseEl.html();
					}
				}
			});

        }
//加载分页
function loadLayPage(data) {
    var laypage = layui.laypage;
    $.ajax({
        type: "get",
        url: "/Blog/articleCount",
        dataType: 'json',
        data:data,
        success: function (result) {
            if (result.code == web_status.SUCCESS) {
                //执行一个laypage实例
                laypage.render({
                    elem: 'laypage' //注意，这里的 test1 是 ID，不用加 # 号
                    , layout: ['page', 'refresh']
                    , count: result.data //数据总数，从服务端得到
                    ,limit: 5//每页条数
                    , jump: function (obj) {
                        data.page=obj.curr;
                        data.limit=5;
                        loadBlog(data);
                        console.log(obj)
                    }
                });
            }
        }
    });
}

//搜索框查询，过滤标题或者文章内容重新加载文章
function reloadArticleByKeyWord(keyword) {
	var param={
		"keyword":keyword
	};
    loadLayPage(param);
}

//分类连接点击点击，过滤类型重新加载文章
function reloadArticle(categoryId) {
	var param={
		"categoryId":categoryId
	};
    loadLayPage(param);
}
//加载文章
function loadBlog(data){
	//博客文章内容加载
	$.ajax({
		type:"get",
		url:"/Blog/articleList",
		dataType: 'json',
		data:data,
		success:function (result) {
			if(result.code==web_status.SUCCESS){
				var responseEl = $("#LAY_bloglist");
				responseEl.html("");
				var html="";
				for(let index=1;index<=result.data.length;index++){
					var data=result.data[index-1];
					html+='<section class="article-item zoomIn article">'+
							'<h5 class="title">'+
							'<span class="fc-blue">【原创】</span>'+
							'<a href="read.html?id='+data.id+'">'+data.articleName+'</a></h5>'+
							'<div class="time">'+
							'<span class="day">'+data.day+'</span>'+
							'<span class="month fs-18">'+data.month+'<span class="fs-14">月</span></span>'+
							'<span class="year fs-18 ml10">'+data.year+'</span>'+
							'</div>'+
							'<div class="content">'+
							'<a href="read.html" class="cover img-light">'+
							'</a>'+
							data.contentShort+
							'</div>'+
							'<div class="read-more">'+
							'<a href="read.html?id='+data.id+'" class="fc-black f-fwb">继续阅读</a>'+
							'</div>'+
							'<aside class="f-oh footer">'+
							'<div class="f-fl tags">'+
							'<span class="fa fa-tags fs-16"></span><a class="tag">'+data.categoryName+'</a>'+
							'</div>'+
							'<div class="f-fr">'+
							'<span class="read">'+
							'<i class="fa fa-eye fs-16"></i>'+
							'<i class="num">'+data.viewNum+'</i>'+
							'</span>'+
							'<span class="ml20">'+
							'<i class="fa fa-comments fs-16"></i>'+
							'<a href="javascript:void(0)" class="num fc-grey">'+data.messageCount+'</a>'+
							'</span>'+
							'</div>'+
							'</aside>'+
							'</section>'
				}
				responseEl.html(html);
			}else{
				responseEl.html();
			}
		}
	});
}

    </script>
</body>
</html>
